<template>
    <div class="Lheader"  v-if="isHome">
        <span class="title">{{title}}</span>
        <router-link :to="link">更多<span class="iconfont icon-gengduo"></span></router-link>
    </div>
    <div class="Card">
        <ul>
            <li v-for="(item,index) in Data" :key="index"  @click="toDetail(item.href)">
                <img :src="item.src"    alt=""/>
                <span class="desc"><text>{{item.desc}}</text></span>
                <span class="name">{{item.name}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
import {useRouter} from 'vue-router'
export default {
    props:{
        isDetial:{
            type:Boolean,
            default:false
        },
        isHome:{
            type:Boolean,
            default:true
        },
        title:{
            type:String,
            default:''
        },
        Data:{
            type:Array,
            default:() =>{ return [] }
        },
        link:{
            type:String,
            default:''
        }
    },
    emits:['refesh'],
    setup(props,context){
        const router = useRouter()
        const toDetail = (href)=>{
            console.log(href);
            router.push({name:'detail',params:{id:href}})
            if (props.isDetial) {
                context.emit('refesh')
            }
        }
        return {
            toDetail
        }
    }
}
</script>

<style lang="less" scoped>
.Lheader{
    display: flex;
    justify-content: space-between;
    margin: 10px 10px;
    .title{
        display: block;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        line-height: 18px;
    }
    a{
        display: block;
        font-size: 14px;
        line-height: 20px;
        color: #999;
    }
}
.Card{
    ul{
        display: flex;
        flex-wrap: wrap;
        margin: 0 10px;
        li{
            display: block;
            margin: auto;
            width: 100px;
            height: 168px;
            margin-bottom: 30px;
            position: relative;
            img{
                width: 100px;
                height: 140px;
            }
            .name{
                position: absolute;
                z-index: 100;
                color: #fff;
                font-size: 14px;
                width: 100%;
                bottom: 0;
                left: 0;
                right: 0;
                margin: 0 auto;
                text-align: center;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
            }
            .desc{
                z-index: 100;
                position: absolute;
                color: #fff;
                font-size: 12px;
                width: 85%;
                bottom: 30px;
                left: 0;
                right: 0;
                margin: 0 auto;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
                text-align: right;
                text{
                    background: -webkit-linear-gradient(right top, #017b10, #e41260);
                    padding: 2px;
                    border-radius: 2px;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                }
            }
        }
    }
}
</style>